<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/layui/lib/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="/layui/lib/layui.js"></script>
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/Sortablemin.js"></script>

    <script src="/lib/ace/ace.js" ></script>
    <script src="/LayUi/sortable/adfFormEngine.js" ></script>
    
    <style class="text/css">
        #leftNav{
            border: 1px solid #ccc;
            min-height: 600px;
        }

        #designArea{
            border: 1px solid #ccc;
            margin-left: 8px;
            min-height: 600px;
        }

        .ctrlItem{
            outline: 1px solid #ccc;
        }

        div.ctrlItem{
            min-height: 30px;
        }

        .layui-inline .ctrlItem {
            min-width: 100px;
        }

        table td.ctrlItem{
            min-height: 30px;
        }

        .ctrlItemInfo{
            border: 1px solid #000;
        }

        .canPut{

        }

        .canPull{

        }

        .minHeight{

        }

        .ctrlItemOver{
            
            
        }

        .ctrlItemClick{
            outline: 1px solid red;
        }

        #myCode{
            margin: 10px;
            min-width: 800px;
            min-height: 800px;
            border: 1px solid #ccc;
        }

         /* 叠加层样式 */
         .overlay-layer {
            width: 20px; /* 叠加层宽度 */
            height: 20px; /* 叠加层高度 */
            background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
            position: absolute; /* 绝对定位 */
           
            z-index: 9999; /* 确保叠加层位于父元素之上 */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: white;
        }

    </style>
</head>
<body>


    <blockquote class="layui-elem-quote">自定义表单 v0.2</blockquote>
    

<div class="layui-row">
    <div class="layui-col-md2 " >

        <div class="layui-tab">
            <ul class="layui-tab-title">
              <li class="layui-this" lay-id="11">控件</li>
              <li lay-id="22">控件结构</li>
              <li lay-id="33">事件</li>
            </ul>
            <div class="layui-tab-content">
              <div class="layui-tab-item layui-show">
                <div id="leftNav">
                    <button class="ctrl ctrlButton">按钮</button>
                    <button class="ctrl ctrlDiv">容器</button>
                    <button class="ctrl ctrlLayuiRow">Layui行</button>
                </div>
              </div>
              <div class="layui-tab-item">
                <div class="layui-row">结构</div>
                <div id="formStructTree"></div>
              </div>
              <div class="layui-tab-item">
                <div class="layui-row"><button id="btnCtrlEventAdd">增加事件</button></div>
                <div id="ctrlEventList"></div>
               
              </div>
            </div>
          </div>


        
    </div>
    <div class="layui-col-md10">
        
        <div class="layui-row">设计区</div>
        <div class="layui-row" id="elemInfo"></div>
        <div class="layui-row" id="childElemInfo"></div>
        <div class="layui-row" style="padding: 10px;">
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnMarkCtrlItem">标记控件</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnSetCtrlProp">设置属性</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnDeleteSelectedElem">删除</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnSetStyleLeft">左对齐</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnSetStyleCenter">居中对齐</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnSetStyleRight">右对齐</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm" id="btnGetStruct">控件结构</button>
        </div>
        <div id="designArea" class="layui-form ctrlItem canPut" adf-ctrl="layuiForm">

           
        </div>
        <div>
            <div class="layui-row">
                <textarea class="layui-textarea" id="ctrlDefine">

                </textarea>
            </div>
            <div class="layui-row"><button class="layui-btn" id="btnSaveCtrlDefine">保存定义</button></div>

            <div class="layui-row">
                <textarea class="layui-textarea" id="resultHtml">

                </textarea>
            </div>
            
        </div>


    </div>
</div>

<div class="layui-row">

    <div class="layui-input-wrap">
        <input type="text" lay-affix="search" lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
        
      </div>

</div>


<script type="text/html" id="EventEditTpl">
    <div class="layui-row"><button id="btnCtrlEventSave" class="layui-btn layui-btn-sm">保存</button></div>
    <table class="layui-table" id="CtrlEventDetail">
        <tbody>
            <tr>
                <td>名称</td>
                <td><input id="caption" value="{{=d.caption}}" /></td>
                <td>类型</td>
                <td><input id="type" value="{{=d.type}}" /></td>
            </tr>
            <tr>
                <td>函数名称</td>
                <td colspan="3">
                    <input id="funcName" value="{{=d.funcName}}" />
                    <input id="content" type="hidden" value="{{=d.content}}" />
                    <input id="doCmd" type="hidden" value="{{=d.doCmd}}" />
                </td>
            </tr>
            <tr>
                <td>代码</td>
                <td colspan="3">
                    <div id="myCode"></div>
                </td>
            </tr>
        </tbody>
    </table>
</script>

<script type="text/html" id="CommonEventTpl">
    <table class="layui-table">
        <tbody>
            {{#  layui.each(d.events, function(index, item){ }}
            <tr>
                <td>{{=item.caption}}</td>
                <td>{{=item.type}}</td>
                <td>{{=item.funcName}}</td>
                <td>
                    <input name="type" type="hidden" value="{{=item.type}}" />
                    <button class="layui-btn layui-btn-xs btnCtrlEventModify">编辑</button><button class="layui-btn layui-btn-xs btnCtrlEventDelete">删除</button>
                </td>       
            </tr>
            {{#  }); }}
        </tbody>
    
</table>
</script>

<script type="text/html" id="CommonAttrTpl">
    <div class="layui-colla-item">
        <div class="layui-colla-title">基本信息</div>
        <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>id</td>
                    <td><input class="layui-input" value="{{=d.ctrl.id}}" /></td>
                </tr>
                <tr>
                    <td>控件类型</td>
                    <td><input class="layui-input" value="{{=d.ctrl.ctrlType}}" /></td>
                </tr>
                <tr>
                    <td>类</td>
                    <td><input class="layui-input" id="class" value="{{=d.ctrl.class}}" /></td>
                </tr>
                <tr>
                    <td colspan="2">样式</td>
                </tr>
                <tr>
                    <td>对齐:</td>
                    <td><input class="layui-input" id="style-textAlign" value="{{=d.ctrl.style.textAlign}}" /></td>
                </tr>
                <tr>
                    <td>宽度:</td>
                    <td><input class="layui-input" id="style-width" value="{{=d.ctrl.style.width}}" /></td>
                </tr>
                <tr>
                    <td>高度:</td>
                    <td><input class="layui-input" id="style-height" value="{{=d.ctrl.style.height}}" /></td>
                </tr>
            </table>
        </div>
      </div>
</script>
<script type="text/html" id="layuiCardTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>
<script type="text/html" id="layuiCardHeaderTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>
<script type="text/html" id="layuiCardBodyTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiFormItemTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->   
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
         
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="divTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">扩展属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>类型</td>
                    <td>
                        <select id="type">
                            {{#  layui.each(d.typeList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.type === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiDataTableTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>url:</td>
                    <td><input class="layui-input" id="url" value="{{=d.ctrl.url}}" /></td>
                </tr>
                <tr>
                    <td>表格id:</td>
                    <td><input class="layui-input" id="elem" value="{{=d.ctrl.elem}}" /></td>
                </tr>
                <tr>
                    <td>字段定义:<button>设置字段</button></td>
                    <td>
                        <textarea class="layui-textarea" id="cols" >{{=d.cols}}</textarea>
                    </td>
                </tr>
                <tr>
                    <td>工具条模板:</td>
                    <td><textarea class="layui-textarea" id="toolbar" >{{=d.toolbar}}</textarea></td>
                </tr>
                <tr>
                    <td>默认工具条:</td>
                    <td><textarea class="layui-textarea" id="defaultToolbar" >{{=d.defaultToolbar}}</textarea></td>
                </tr>
                <tr>
                    <td>宽度:</td>
                    <td><input class="layui-input" id="width" value="{{=d.ctrl.width}}" /></td>
                </tr>
                <tr>
                    <td>高度:</td>
                    <td><input class="layui-input" id="height" value="{{=d.ctrl.height}}" /></td>
                </tr>
                <tr>
                    <td>行样式:</td>
                    <td><input class="layui-input" id="lineStyle" value="{{=d.ctrl.lineStyle }}" /></td>
                </tr>
                <tr>
                    <td>追加样式:</td>
                    <td><input class="layui-input" id="className" value="{{=d.ctrl.className  }}" /></td>
                </tr>
                <tr>
                    <td>单元格默认展开方式:</td>
                    <td><input class="layui-input" id="cellExpandedMode" value="{{=d.ctrl.cellExpandedMode   }}" /></td>
                </tr>
                <tr>
                    <td>开启合计行:</td>
                    <td><input class="layui-input" id="totalRow" value="{{=d.ctrl.totalRow   }}" /></td>
                </tr>
                <tr>
                    <td>分页:</td>
                    <td><input class="layui-input" id="page" value="{{=d.ctrl.page   }}" /></td>
                </tr>
                <tr>
                    <td>每页显示的条数:</td>
                    <td><input class="layui-input" id="limit" value="{{=d.ctrl.limit   }}" /></td>
                </tr>
                <tr>
                    <td>条数的选择项:</td>
                    <td><input class="layui-input" id="limits" value="{{=d.ctrl.limits   }}" /></td>
                </tr>
                <tr>
                    <td>表格边框风格:</td>
                    <td><input class="layui-input" id="skin" value="{{=d.ctrl.skin   }}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>


<script type="text/html" id="layuiCheckboxGroupTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>名称:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>选项列表:</td>
                    <td><textarea class="layui-textarea" id="itemInfo" >{{=d.itemInfo}}</textarea></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiRadioGroupTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>名称:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>选项列表:</td>
                    <td><textarea class="layui-textarea" id="itemInfo" >{{=d.itemInfo}}</textarea></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiSelectTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>名称:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>选择器:</td>
                    <td><input class="layui-input" id="layFilter" value="{{=d.ctrl.layFilter}}" /></td>
                </tr>
                <tr>
                    <td>选项列表:</td>
                    <td><textarea class="layui-textarea" id="itemInfo" >{{=d.itemInfo}}</textarea></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>


<script type="text/html" id="imgTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>地址:</td>
                    <td><input  class="layui-input" id="src" value="{{=d.ctrl.src}}" /></td>
                </tr>
                <tr>
                    <td>替换文字:</td>
                    <td><input  class="layui-input" id="alt" value="{{=d.ctrl.alt}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiBadgeTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>标题:</td>
                    <td><input class="layui-input" id="caption" value="{{=d.ctrl.caption}}" /></td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>
                        <select id="color">
                            {{#  layui.each(d.themeList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.type === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiDatetimeTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input class="layui-input" id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input class="layui-input" id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input class="layui-input" id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input class="layui-input" id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>
<script type="text/html" id="layuiInputTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input class="layui-input" id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input class="layui-input" id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input class="layui-input" id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input class="layui-input" id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiInputWrapTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>name:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>placeholder:</td>
                    <td><input class="layui-input" id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
                <tr>
                    <td>验证规则:</td>
                    <td><input class="layui-input" id="layVerify" value="{{=d.ctrl.layVerify}}" /></td>
                </tr>
                <tr>
                    <td>验证提示:</td>
                    <td><input class="layui-input" id="layVertype" value="{{=d.ctrl.layVertype}}" /></td>
                </tr>
                <tr>
                    <td>忽略渲染?:</td>
                    <td><input class="layui-input" id="layIgnore" value="{{=d.ctrl.layIgnore}}" /></td>
                </tr>
                <tr>
                    <td>是否后缀分隔:</td>
                    <td><input class="layui-input" id="split" value="{{=d.ctrl.split}}" /></td>
                </tr>

            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiTextareaTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>名称:</td>
                    <td><input class="layui-input" id="name" value="{{=d.ctrl.name}}" /></td>
                </tr>
                <tr>
                    <td>名称:</td>
                    <td><input class="layui-input" id="placeholder" value="{{=d.ctrl.placeholder}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="buttonTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>标题:</td>
                    <td><input class="layui-input" id="caption" value="{{=d.ctrl.caption}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiFormLabelTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>标题:</td>
                    <td><input class="layui-input" id="caption" value="{{=d.ctrl.caption}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiTableCellTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiTabTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>数量:</td>
                    <td></td>
                </tr>
                <tr>
                    <td>增加标签:</td>
                    <td><button class="layui-btn layui-btn-sm btnAddSetup" id="layuiTabAddItem">增加选项</button></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiTabItemTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiTableTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>行数:</td>
                    <td><input class="layui-input" id="rowNum" value="{{=d.ctrl.rowNum}}" /></td>
                </tr>
                <tr>
                    <td>列数:</td>
                    <td><input class="layui-input" id="colNum" value="{{=d.ctrl.colNum}}" /></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiButtonTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>标题:</td>
                    <td><input class="layui-input" id="caption" value="{{=d.ctrl.caption}}" /></td>
                </tr>
                <tr>
                    <td>主题</td>
                    <td>
                        <select id="theme">
                            {{#  layui.each(d.themeList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.theme === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>边框</td>
                    <td>
                        <select id="border">
                            {{#  layui.each(d.borderList, function(index, item){ }}
                            <option value="{{=item.value}}" {{#  if(d.ctrl.border === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>尺寸</td>
                    <td>
                        <select id="size">
                            {{#  layui.each(d.sizeList, function(index, item){ }}
                            <option value="{{=item.value}}" {{#  if(d.ctrl.size === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiProgressTpl">
   
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>进度值</td>
                    <td><input class="layui-input" id="layPercent" class="layui-input" value="{{=d.ctrl.layPercent}}" /></td>
                </tr>
                <tr>
                    <td>主题</td>
                    <td>
                        <select id="theme">
                            {{#  layui.each(d.themeList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.theme === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>尺寸</td>
                    <td>
                        <select id="size">
                            {{#  layui.each(d.sizeList, function(index, item){ }}
                            <option value="{{=item.value}}" {{#  if(d.ctrl.size === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>Content 2</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiRowTpl">
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>当前列数</td>
                    <td><input class="layui-input" value="{{=d.colNum}}" /></td>
                </tr>
                <tr>
                    <td>操作</td>
                    <td><button class="layui-btn layui-btn-xs btnAddSetup" id="layuiRowAddCol">增加列</button></td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>无</p>
            </div>
          </div>
      
      </div>
</script>

<script type="text/html" id="layuiRowColTpl">
    <div class="layui-collapse" lay-filter="tplInfo">
        <!--CommonAttr-->
        <div class="layui-colla-item">
          <div class="layui-colla-title">属性</div>
          <div class="layui-colla-content">
            <table class="layui-table">
                <tr>
                    <td>列宽</td>
                    <td>
                        <select id="mdNum">
                            {{#  layui.each(d.mdNumList, function(index, item){ }}
                                <option value="{{=item.value}}" {{#  if(d.ctrl.mdNum === item.value){ }} selected  {{#  } }}>{{=item.caption}}</option>
                            {{#  }); }}
                        </select>
                    </td>
                </tr>
            </table>
          </div>
        </div>
        <div class="layui-colla-item">
            <div class="layui-colla-title">事件</div>
            <div class="layui-colla-content">
              <p>无</p>
            </div>
          </div>
      
      </div>
</script>


    <script>
        
        adfFormEngine.ayForm.init();
    </script>
</body>
</html>